<template>
  <section class="todoapp">
    <hm-header @jiaru="jiaa"></hm-header>
    <hm-main :list="showList" @del="dell" @gou="gouu" @quanxuan="quanxuana"></hm-main>
    <hm-footer :list="list" @qc="qc" :chushi='chushi' @xiuxiu='chushi=$event'></hm-footer>
  </section>
</template>

<script>
const obj={
  '#/':'all',
  '#/active':'wwc',
  '#/completed':'wc'
}
import HmHeader from './components/hm-header.vue'
import HmMain from './components/hm-main.vue'
import HmFooter from './components/hm-footer.vue'
export default {
  watch:{
  list:{
     deep:true,
    handler(newvalue){
      window.localStorage.setItem('list',JSON.stringify(newvalue))
    },
   
  },
 },
  computed:{
    showList(){
      if(this.chushi==='all'){
        return this.list
      }else if(this.chushi==='wwc'){
        return this.list.filter(item=>item.done===false)
      }else {
        return this.list.filter(item=>item.done===true)
      }
    }
  },
  methods:{
    jiaa(e){
      if(e==='')return alert('内容不能为空')
      const id=this.list.length===0? 1:this.list.slice(-1)[0].id+1
      const obj={
        id,
        name:e,
        done:false
      }
      this.list.push(obj)
    },
    dell(e){
      const index= this.list.findIndex(item=>item.id===e)
      this.list.splice(index,1)
    },
    gouu(e){
      const obj= this.list.find(item=>item.id===e)
      obj.done=!obj.done
    },
    qc(){
      this.list=this.list.filter(item=>item.done===false)
    },
    quanxuana(e){
      this.list=this.list.map(item=>{
        item.done=e
        return item
        })
    }
  },
  data(){
    return{
      chushi:obj[location.hash]||'all',
      list: JSON.parse(window.localStorage.getItem('list')) || [],
    }
  },
  components: {
    HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style></style>
